<template>
  <el-card class="box-card card-chart h-100 d-flex flex-column" :body-style="{flex: 1}">
    <div slot="header" class="clearfix">
      <span>省级检查进度</span>
    </div>
    <div class="wd-card-body" style="padding: 0;">
      <div ref="echarts" class="h-100 w-100"></div>
    </div>
  </el-card>
</template>
<script>
import interval from "./interval";

export default {
  name: "ProvinceChart",
  title: "省级检查进度",
  mixins: [interval],
  data() {
    return {
      xAxis: [],
      legend: ["全部"],
      series: [
        {
          name: "全部",
          type: "line",
          data: []
        }
      ],
      url: "survey/report/statisticsSurveyOverallDeploy"
    };
  },
  methods: {
    setData(datas) {
      this.setOption();
    },
    setOption() {
      this.chart.setOption({
        color: ["#3AA1FF", "#4EC973"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["未完成的区县", "已完成的区县"],
          top: 15
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: "value"
        },
        xAxis: {
          type: "category",
          data: ["全部工作", "内业初查", "内业复查", "内业复核", "数据质检"]
        },
        series: [
          {
            name: "未完成的区县",
            type: "bar",
            stack: "总量",
            barCategoryGap: "50%",
            label: {
              normal: {
                show: true
              }
            },
            data: [102, 97, 102, 87, 92]
          },
          {
            name: "已完成的区县",
            type: "bar",
            stack: "总量",
            barCategoryGap: "50%",
            label: {
              normal: {
                show: true
              }
            },
            data: [5, 10, 5, 20, 15]
          }
        ]
      });
    }
  }
};
</script>
